<template>
  <div class="main">
    <el-card shadow="never">
      <ul class="acc-ul">
        <template v-for="(item,index) in accumulatedData">
          <li>
            <div :style="isBackColor(index)">
              <el-image :src="item.icon" style="width: 50px;height: 50px" fit="cover"></el-image>
              <div style="margin-left: 20px">
                {{ item.title }} <br>
                <strong :style="{color:colors[index],fontSize:'18px'}">{{ item.value }} </strong> {{ item.unit }}
              </div>
            </div>
            <div>
              <div class="sub-title" :style="{borderColor:colors[index]}">{{ item.title }}</div>
              <div class="sub-list">
                <div v-for="item2 in item.child">
                  <div> {{ item2.key }}</div>
                  <div><strong :style="{color:colors[index]}"> {{ item2.value }}</strong> <small>
                    {{ index === 1 ? '条' : '家' }} </small></div>
                </div>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </el-card>
    <br>
    <div class="panel-flex">
      <div>
        <div class="panel-echart">
          <click-through-rate-dashboard></click-through-rate-dashboard>
        </div>
        <div class="panel-table">
          <el-table :data="policySendRateByDeptData" border height="240"
                    :header-cell-style="{ background: '#f4f6f8', color: '#000000' }">
            <el-table-column prop="key" label="街道"/>
            <el-table-column prop="value" label="短信发送率">
              <template #default="scope">
                {{ formatPercentage(scope.row.value) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div>
        <div class="panel-echart">
          <click-through-rate-panel></click-through-rate-panel>
        </div>
        <div class="panel-table">
          <el-table :data="policyClickRateRank" border height="240"
                    :header-cell-style="{ background: '#f4f6f8', color: '#000000' }">
            <el-table-column prop="key" label="政策名称"/>
            <el-table-column prop="value" label="政策点击率">
              <template #default="scope">
                {{ formatPercentage(scope.row.value) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <br>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="po-echarts">
          <div class="ov-title">
            <strong>政策方向分布</strong>
          </div>
          <policy-direction-distribution-echarts></policy-direction-distribution-echarts>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="po-echarts">
          <div class="ov-title">
            <strong>政策发文单位分布</strong>
          </div>
          <distribution-of-policy-issuing-units-echarts></distribution-of-policy-issuing-units-echarts>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="po-echarts">
          <div class="ov-title">
            <strong>智配企业注资分布</strong>
          </div>
          <distribution-of-capital-injection-echarts></distribution-of-capital-injection-echarts>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="po-echarts">
          <div class="ov-title">
            <strong>智配企业行业分布</strong>
          </div>
          <distribution-of-intelligent-matching-industry-echarts></distribution-of-intelligent-matching-industry-echarts>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="po-echarts">
          <div class="ov-title">
            <strong>智配企业年限分布</strong>
          </div>
          <enterprise-years></enterprise-years>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="po-echarts">
          <div class="ov-title">
            <strong>配企业街道分布</strong>
          </div>
          <street-distribution-echarts></street-distribution-echarts>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import {accumulatedData, policyClickRateRank, policySendRateByDeptData} from '../data/data.js'
import ClickThroughRateDashboard from "@/views/policyIntelligenceMatching/Echarts/ClickThroughRateDashboard.vue";
import {formatPercentage} from "@/utils/index.js";
import DistributionOfCapitalInjectionEcharts
  from "@/views/policyIntelligenceMatching/Echarts/distributionOfCapitalInjectionEcharts.vue";
import PolicyDirectionDistributionEcharts
  from "@/views/policyIntelligenceMatching/Echarts/policyDirectionDistributionEcharts.vue";
import DistributionOfPolicyIssuingUnitsEcharts
  from "@/views/policyIntelligenceMatching/Echarts/DistributionOfPolicyIssuingUnitsEcharts.vue";
import DistributionOfIntelligentMatchingIndustryEcharts
  from "@/views/policyIntelligenceMatching/Echarts/DistributionOfIntelligentMatchingIndustryEcharts.vue";
import EnterpriseYears from "@/views/policyIntelligenceMatching/Echarts/EnterpriseYears.vue";
import StreetDistributionEcharts from "@/views/policyIntelligenceMatching/Echarts/StreetDistributionEcharts.vue";
import ClickThroughRatePanel from "@/views/policyIntelligenceMatching/Echarts/ClickThroughRatePanel.vue";

const colors = ['#466cff', '#37c97d', '#ff943d']

const isBackColor = (key) => {
  const backColor = [
    {
      background: 'linear-gradient(270deg, #e3e9ff 0%, #ffffff 100%)'
    },
    {
      background: 'linear-gradient(270deg, #c9f4dd 0%, #ffffff 100%)'
    },
    {
      background: 'linear-gradient(270deg, #ffecdc 0%, #ffffff 100%)'
    }
  ]
  return backColor[key]
}
</script>
<style scoped lang="scss">

.main {
  width: 100%;
  height: calc(100vh - 90px);
}


.acc-ul {
  li {
    height: 115px;
    display: flex;
    margin-bottom: 20px;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

    &:last-child {
      margin-bottom: 0;
    }

    > div:first-child {
      width: 220px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    > div:last-child {
      width: calc(100% - 220px);
      padding: 10px 20px;
      box-sizing: border-box;
      background-color: #f7f9ff;
    }
  }
}

.sub-title {
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  border-left: 3px solid #ffffff;
}

.sub-list {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;

  > div {
    width: calc(20% - 60px);
    display: flex;
    justify-content: space-between;
    margin-right: 30px;
    margin-bottom: 2px;
  }
}

.panel-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;

  > div {
    width: calc(50% - 10px);
    height: 280px;
    background-color: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    display: flex;

    .panel-echart {
      height: 100%;
      width: 60%;
    }

    .panel-table {
      height: 100%;
      width: 40%;
    }
  }
}

.po-echarts {
  height: 300px;
  padding: 10px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

.ov-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

</style>
